<template>
  <div class="product-desc">
    <p class="title">{{ detail.title }}</p>
    <p class="title_sub">{{ detail.title_sub }}</p>
    <p class="price" v-if="detail.area && +detail.area.area_id === 2">{{ +detail.price }}积分</p>
    <p class="price" v-else>￥{{ +detail.price }}</p>
    <p class="price_old">￥{{ +detail.price_old }}</p>
    <p class="stock">库存:{{ +detail.stock }}</p>
    <div class="qrcode" @click="$emit('qrcodeShare')">
      <i class="cubeic-qr-code"></i>
    </div>
    <div class="quantity">
      <span>选择数量:</span>
      <div class="sub" @click="decrement">-</div>
      <div class="num" @click="change">{{ quantity }}</div>
      <div class="add" @click="increment">+</div>
    </div>
<!--    <div class="tip" v-if="+detail.price === 399">一人限购一单</div>-->
<!--    <div class="tip" v-if="detail.scoreCost && +detail.scoreCost.total === 22">限购一盒</div>-->
  </div>
</template>

<script>
export default {
  name: 'ProductDescription',
  props: ['detail'],
  data() {
    return {
      quantity: 1
    }
  },
  methods: {
    change() {
      this.$createDialog({
        type: 'prompt',
        title: '选择数量',
        mask: true,
        prompt: {
          placeholder: '请选择购买数量',
          clearable: true,
        },
        onConfirm: (e, value) => {
          if (value === undefined || isNaN(+value)) {
            return this.$createToast({
              type: 'error',
              time: 1500,
              txt: '请输入正确的数量',
            }).show()
          }
          if (value <= this.detail.stock && value > 0) {
            this.quantity = value
            this.$emit('changeQuantity', this.quantity)
          }
        }
      }).show()
    },
    decrement() {
      if (this.quantity > 1) {
        this.quantity--
        this.$emit('changeQuantity', this.quantity)
      }
    },
    increment() {
      if (this.quantity < this.detail.stock) {
        // console.log(this.detail.stock)
        this.quantity++
        this.$emit('changeQuantity', this.quantity)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
$size = 22px
$button = $size + 5px

.product-desc
  padding 10px
  margin 10px
  background white
  border-radius 10px
  text-align left
  color $main_text_color
  position relative
  .quantity
    //background red
    padding 10px 0
    display flex
    text-align center
    align-items center
    span
      margin-right 10px
    .sub, .num, .add
      border 1px solid #dcdcdc
      min-width $size
      height $size
      line-height $size
    .num
      width 40px
    .sub, .add
      min-width $button
      font-weight 700
    .sub
      border-right none
      border-top-left-radius 10px
      border-bottom-left-radius 10px
    .add
      border-left none
      border-top-right-radius 10px
      border-bottom-right-radius 10px
  .tip
    color red
    font-weight 700
    position absolute
    right 10px
    top 10px
    font-size 16px
    letter-spacing 2px
  p
    line-height 22px
    &.title
      font-weight 700
      font-size 16px
    &.title_sub
      color $second_text_color
    &.price
      font-size 20px
      font-weight 700
      color red
      line-height 30px
    &.price_old
      font-size 16px
      color $second_text_color
      text-decoration line-through
    &.stock
      font-size 14px
  .qrcode
    position absolute
    font-size 50px
    color $main_color
    right 15px
    bottom 15px
</style>
